<template>
  <div id="uploader">
    <div id="picker" style="line-height: 18px;"><i class="el-icon-upload" /><em>点击选择文件</em></div>
    <ul id="theList" />
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
    }
  },
  mounted() {
    const s = document.createElement('script')
    s.type = 'text/javascript'
    s.src = './webuploader2/chunk.js'
    document.body.appendChild(s)
    const s1 = document.createElement('script')
    s1.type = 'text/javascript'
    s1.src = './webuploader2/md5'
    document.body.appendChild(s1)
    const s2 = document.createElement('script')
    s2.type = 'text/javascript'
    s2.src = './webuploader2/jquery-1.10.2.min.js'
    document.body.appendChild(s2)
    const s3 = document.createElement('script')
    s3.type = 'text/javascript'
    s3.src = './webuploader2/webuploader2'
    document.body.appendChild(s3)
    window.setFileMd5 = this.setFileMd5
  },
  methods: {
    setFileMd5(params) {
      this.$emit('setFileUrl', params)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style type="text/css">
        .webuploader-container {
            position: relative;
        }

        .webuploader-element-invisible {
            position: absolute !important;
            clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
            clip: rect(1px, 1px, 1px, 1px);
        }

        .webuploader-pick {
            position: relative;
            display: inline-block;
            cursor: pointer;
            background: #00b7ee;
            padding: 10px 15px;
            color: #fff;
            text-align: center;
            border-radius: 3px;
            overflow: hidden;
        }

        .webuploader-pick-hover {
            background: #00a2d4;
        }

        .webuploader-pick-disable {
            opacity: 0.6;
            pointer-events: none;
        }
        .itemDel, .itemStop, .itemUpload {
            margin-left: 15px;
            color: blue;
            cursor: pointer;
        }

        #theList {
            width: 280px;
            min-height: 10px;
            /* border: 1px solid; */
        }

        #theList .itemStop {
            display: none;
        }
    </style>
